<template>
  <div>
    <div class="main">
      <eagle-input
        label="文件名称"
        v-model="form.Name"
        name="Name"
        required
        readonly
      >
      </eagle-input>

      <eagle-input
        label="签字人"
        v-model="form.ChnName"
        name="ChnName"
        required
        readonly
      >
      </eagle-input>

      <!-- <van-field label="证书附件" v-model="form.Attachs2" name="Attachs2">
      </van-field> -->
      <van-field
        label="签名文件"
        class="input_text_block"
        required
      >
        <template #input>
          <div
            v-for="(item, index) in form.Attachs"
            :key="index"
            class="wrapper space-between mb-10"
          >
            <a
              style="color: blue"
              @click="_goEnclosure(item.AttCode)"
            >
              {{ item.AttName }}{{ item.AttExt }}</a>
          </div>
        </template>
      </van-field>

    </div>

  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  components: {},
  data() {
    return {
      id: this.$route.query.id,
      form: {},
    };
  },

  computed: {
    ...mapGetters(["baseUrl", "CompanyCode", "roles"]),
  },

  created() {
    if (this.$route.query.id != null) {
      (this.id = this.$route.query.id), this.getDetail();
    }

    console.log("id", this.$route.query.id);

    //this.getDistList();
  },
  methods: {
    _goEnclosure(attachCode) {
      this.$router.push("/Attach/AatachDetail?attCode=" + attachCode);
    },
    getDetail(certId) {
      let params = { id: this.id };

      this.$axios
        .get("/SitePromiseRecord/GetDetail", { params: params })
        .then((res) => {
          if (res.data.Attachs) {
            let Attachs = res.data.Attachs.split(";");
            console.log(Attachs, "Attachs");
            res.data.Attachs = JSON.parse(res.data.Attachs);
          } else {
            res.data.Attachs = [];
          }
          this.form = res.data;
        });
    },
  },
};
</script>

<style lang="less" >
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>
<style lang="less" scoped>
.space-between {
  justify-content: space-between;
}
</style>
